<template>
  <view class="counter">
    <div class="number-display">
		<div class="number" id="number">{{currentValue}}</div>
	</div>
  </view>
</template>

<script>
export default {
  name: 'RollingCounterSimple',
  props: {
    current: { type: Number, default: 8464 },  // 增量（外部传入）
  },
  data() {
    return {
      startValue: 0,
      endValue: 2765,
	  animationId: null,
	  currentValue: 0,
	  isChanging: false,
    }
  },
  computed: {
    
  },
  mounted() {
	this.endValue=this.current+18645;
    this.startAnimation()
  },
  methods: {
	startAnimation(){
		if (this.animationId) return;
		const startTime = Date.now();
		const duration = 3000; // 动画持续时间（毫秒）
		
		const that=this;
		
		function animate() {
			const elapsed = Date.now() - startTime;
			const progress = Math.min(elapsed / duration, 1);
			// 使用缓动函数使动画更自然
			const easedProgress = that.easeOutCubic(progress);
			// 计算当前值
			that.currentValue = Math.floor(that.startValue + (that.endValue - that.startValue) * easedProgress);
			// 继续动画直到完成
			if (progress < 1) {
				that.animationId = setTimeout(animate, 16); // 模拟 ~60FPS
			} else {
				that.animationId = null;
			}
		}
		animate();
	},
	// 缓动函数 - 使动画更自然
	easeOutCubic(t){
		return 1 - Math.pow(1 - t, 3);
	},
  },
  beforeDestroy() {
    if (this.animationId) clearTimeout(this.animationId);
  },
}
</script>

<style scoped>
	.number-display {
		position: relative;
		height: 120px;
		margin: 30px 0;
		perspective: 500px;
	}
	
	.number {
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform 0.5s ease;
	}
	
	
</style>
